<template>
    <svg :style="svgStyle" class="icon" aria-hidden="true">
        <use :xlink:href="`#${props.icon}`"></use>
    </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'
// 思考：哪些东西是变化的，应该通过props进行传递（组件的多元化）
// 1. 图标的名字（icon） 2. 图标的颜色（color）3.图标的大小（size）3. customStyle（用户配置的sty）
// 定义一个props

type svgprops = {
    icon: string
    color?: string
    size: number | string,
    // 用户自定义的行内样式
    customStyle: object
}

const props = withDefaults(defineProps<svgprops>(), {
    // 默认值
    icon: 'icon-waimai',
    size: 18,
    // 对于应用类型，必须要写成函数返回的方式。防止引用污染
    customStyle: () => { return {} }
})

// 1.以下情况怎么处理  2. 在哪里去拼接
// color: red   size: 80  ==> { color: 'red', font-size: '80px' }
// color: red   size: 80 customStyle: {position: relative, top: 30px;}
// color: red   size: 80 customStyle: {font-size: 45px, color: green;} 

const svgStyle = computed(() => {
    let style:any = {}
    // 如果用户传了颜色
    if(props.color) style.color = props.color
    // 如果用户传了size
    if(props.size) {
        // 12的数字（给他加一个px）   12px （不管）
        if(typeof props.size === 'string') style.fontSize = props.size
        else style.fontSize = `${props.size}px`
    }
    // 如果style与customStyle有属性的冲突，谁在后面以谁为主
    style = {...props.customStyle, ...style }
    return style
})

</script>

<style scoped lang="scss">
    .icon {
        // 颜色与大小
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        // 填充（颜色），去自己的颜色进行填充， 取父级
        fill: currentColor;
        overflow: hidden;
    }
</style>